<template>
	<view class="page">
		<!-- 用户信息区域 -->
		<view class="user-header-section fade-in-up">
			<view class="user-info-container">
			<view v-if="isLogin == false" @click="login()" class="user-login-card">
				<app-icon name="icon_smile" type="iconfont" size="80" color="#fff" 
						background-color="#1890FF" border-radius="50%"></app-icon>
				<view class="user-info-content">
					<view class="user-name">
						<text class="ftw600">登录／注册</text>
						<text class="iconfont iconbtn_arrowr ml10"></text>
					</view>
					<view class="user-desc">立即登录享受更多权益</view>
				</view>
			</view>

			<view v-else>
				<navigator url="/pages/member/info/info" class="user-info-card">
					<app-icon :name="userAvatar"
							type="image" custom-class="member-face" size="80"></app-icon>
					<view class="user-details">
						<view class="user-name ftw600">{{ userName }}</view>
						<view class="user-phone">{{ userPhone }}</view>
					</view>
					<text class="user-arrow iconfont iconbtn_arrowr"></text>
				</navigator>
			</view>

				<view v-if="isLogin == true" class="sign-section">
					<navigator url="/pages/member/sign/index">
						<view class="sign-btn">
							<app-icon name="icon_plus_detail" type="iconfont" size="32" color="#fff"></app-icon>
							<text class="sign-text">每日签到</text>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<!-- PLUS会员区域 -->
		<view class="plus-section fade-in-up" style="animation-delay: 0.1s;">
			<view class="plus-container">
				<view v-if="isPlus == false" class="plus-card not-activated">
					<view class="plus-content">
						<view class="plus-header">
							<text class="plus-title">PLUS会员</text>
							<text class="plus-subtitle">自购省推广赚</text>
						</view>
						<view @click="loginAct" data-link="/pages/plus/index" class="plus-action-btn">
							<text class="btn-text">开通Plus</text>
							<text class="iconfont iconbtn_more"></text>
						</view>
					</view>
				</view>
				<view v-else class="plus-card activated">
					<view class="plus-content">
						<view class="plus-header">
							<text class="plus-title">PLUS会员</text>
							<text class="plus-subtitle">2020/12/31到期</text>
						</view>
						<view @click="loginAct" data-link="/pages/plus/mine/index" class="plus-action-btn">
							<text class="btn-text">会员中心</text>
							<text class="iconfont iconbtn_more"></text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<view class="main-content fade-in-up" style="animation-delay: 0.2s;">
			<!-- 绑定卡片区域 -->
			<view v-if="isLogin == true" class="binding-cards">
				<view @click="plugAct" class="binding-card invite-card">
					<view class="card-icon">
						<app-icon name="icon_plus_detail" type="iconfont" size="60" 
							:background-color="isBindPlus ? '#52C41A' : '#1890FF'" 
							color="#fff" borderRadius="16"></app-icon>
					</view>
					<view class="card-content">
						<view class="card-title">{{ isBindPlus ? '联系邀请人' : '绑定邀请人' }}</view>
						<view class="card-status">
							<text :class="isBindPlus ? 'status-active' : 'status-default'">{{ isBindPlus ? '已绑定' : '去绑定' }}</text>
							<text class="iconfont iconbtn_more status-arrow"></text>
						</view>
					</view>
				</view>

				<view @click="storeAct" class="binding-card store-card">
					<view class="card-icon">
						<app-icon name="iconbtn_upload" type="iconfont" size="60" 
							background-color="#722ED1" color="#fff" borderRadius="16"></app-icon>
					</view>
					<view class="card-content">
						<view class="card-title">绑定邀请商户</view>
						<view class="card-status">
							<text class="status-default">去绑定</text>
							<text class="iconfont iconbtn_more status-arrow"></text>
						</view>
					</view>
				</view>
			</view>

			<!-- 资产卡片区域 -->
			<view class="assets-section">
				<view class="assets-card">
					<view @click="loginAct" data-link="/pages/member/money/index" class="asset-item balance-item">
						<view class="asset-value">{{ userInfo && userInfo.balance || 0 }}</view>
						<view class="asset-label">余额</view>
					</view>
					<view @click="loginAct" data-link="/pages/member/coupon/index" class="asset-item coupon-item">
						<view class="asset-value">{{ userInfo && userInfo.couponCount || 0 }}</view>
						<view class="asset-label">优惠券</view>
					</view>
					<view @click="loginAct" data-link="/pages/member/integral/index" class="asset-item integral-item">
						<view class="asset-value">{{ userInfo && userInfo.integral || 0 }}</view>
						<view class="asset-label">积分</view>
					</view>
				</view>
			</view>

			<!-- 订单区域 -->
			<view class="order-section">
				<view class="order-card">
					<view class="order-header">
						<view class="section-title">我的订单</view>
						<view :data-link="'/pages/member/order/index'" @click="loginAct" class="section-more">
							<text>全部订单</text>
							<text class="iconfont iconbtn_more"></text>
						</view>
					</view>
					<view class="order-types">
						<view v-for="(item, index) in orderType" :key="index"
							:data-link="'/pages/member/order/index?type=' + (index + 1)" @click="loginAct"
							class="order-type-item">
							<view class="order-icon">
								<app-icon :name="item.iconName" type="iconfont" size="48" 
									:background-color="item.iconBg" :color="item.color" borderRadius="16"></app-icon>
							</view>
							<view class="order-name">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 服务区域 -->
			<view class="service-section">
				<view class="service-card">
					<view class="section-title">我的服务</view>
					<view class="service-grid">
						<view v-for="(item, index) in serviceList" :key="index" :data-link="item.url" @click="loginAct"
							class="service-item">
							<view class="service-icon">
								<app-icon :name="item.iconName" type="iconfont" size="56" 
									:background-color="item.iconBg" :color="item.color" borderRadius="16"></app-icon>
							</view>
							<view class="service-name">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<unio2o-login @cancel="loginAlert = false" @yes="onLoginSuccess" :show="loginAlert"></unio2o-login>

		<unio2o-model-middle v-if="isLogin == true" @closed="plusContactAlert = false" title="联系邀请人"
			:show="plusContactAlert">
			<view class="pd30">
				<view class="flex center pt30">
					<image class="face60" :src="''"></image>
				</view>
				<view class="ft16 text-center mt30 text-main">张女士</view>
				<view class="ft16 ftw600 text-center text-theme mt30">
					<text>微信号：</text>
					<text>abc123456</text>
					<text class="ftw400 text-info ml10">复制</text>
				</view>
				<view class="text-center mt30">
					<image class="qrcode-img" :src="''"></image>
				</view>
				<view class="pd30">
					<button class="btn-main text-w ftw600" style="width: 80%;">保存微信二维码</button>
				</view>
			</view>
		</unio2o-model-middle>

		<unio2o-modal v-if="isLogin == true" @closed="plusBindAlert = false" title="绑定邀请人" :show="plusBindAlert">
			<view class="pd30">
				<view class="flex center">
					<input class="input-info text-center" type="text" placeholder-style="color:#cccccc;"
						placeholder="请输入邀请码" />
				</view>
				<view class="pd30 flex alcenter">
					<app-icon name="icon_plus_detail" type="iconfont" size="80" color="#ccc"></app-icon>
					<text class="ft14 text-main ftw600 ml20">张女士</text>
					<text class="ft14 text-info ml20">150****1234</text>
				</view>
				<view class="mt30">
					<button class="btn-main ft18 ftw600 text-w">确定绑定</button>
				</view>
				<view class="text-notice mt20 ft12 text-center">邀请码一旦绑定无法更改，请认真填写</view>
			</view>
		</unio2o-modal>
		<unio2o-modal v-if="isLogin == true" @closed="storeBindAlert = false" title="绑定邀请商户" :show="storeBindAlert">
			<view class="pd30">
				<view class="flex center">
					<input class="input-info text-center" type="text" placeholder-style="color:#cccccc;"
						placeholder="请输入邀请码" />
				</view>
				<view class="pd30 flex alcenter">
					<app-icon name="iconbtn_upload" type="iconfont" size="80" color="#ccc"></app-icon>
					<text class="ft14 text-main ftw600 ml20">麦当劳</text>
					<text class="ft14 text-info ml20">0551-65560407</text>
				</view>
				<view class="mt30">
					<button class="btn-main ft18 ftw600 text-w">确定绑定</button>
				</view>
				<view class="text-notice mt20 ft12 text-center">邀请码一旦绑定无法更改，请认真填写</view>
			</view>
		</unio2o-modal>



		<unio2o-footer :selectIndex="4"></unio2o-footer>
	</view>
</template>

<script>
import unio2oModal from '@/components/base/modal/modal.vue';
import unio2oModelMiddle from '@/components/base/modal/middle.vue';
import {
	mapGetters,
	mapActions
} from 'vuex';
export default {
	components: {
		unio2oModal,
		unio2oModelMiddle
	},
	data() {
		return {
			isPlus: true,
			isBindPlus: true,
			loginAlert: false,
			plusContactAlert: false,
			plusBindAlert: false,
			storeBindAlert: false,
			orderType: [
				{
					type: 1,
					name: '待支付',
					iconName: 'icon_history',
					iconBg: '#CCCCCC', //深灰色
					color: '#FFFFFF',
				},
				{
					type: 2,
					name: '待核销',
					iconName: 'icon_order',
					iconBg: '#FFB800', //黄色
					color: '#FFFFFF',
				},
				{
					type: 3,
					name: '待评价',
					iconName: 'iconbtn_zan1',
					iconBg: '#1890FF', //蓝色
					color: '#FFFFFF',
				}, 
				{
					type: 4,
					name: '已完成',
					iconName: 'icon_smile',
					iconBg: '#52C41A', //绿色
					color: '#FFFFFF',
				},
				{
					type: 5,
					name: '退款单',
					iconName: 'icon_order4',
					iconBg: '#FF4D4F', //红色
					color: '#FFFFFF',
				}
			],
			serviceList: [
				{
					url: '/pages/member/unicard/index',
					name: '联盟卡包',
					iconName: 'icon_balance_des',
					iconBg: '#1890FF',
					color: '#E6F7FF',
				},
				{
					url: '/pages/exchange/index',
					name: '积分商城',
					iconName: 'icon_integral_detail',
					iconBg: '#722ED1',
					color: '#F9F0FF',
				},
				{
					url: '/pages/member/love',
					name: '我的收藏',
					iconName: 'iconbtn_sahre',
					iconBg: '#FF6B6B',
					color: '#FFE8E8',
				},
				{
					url: '/pages/member/comment/index',
					name: '我的评价',
					iconName: 'iconbtn_zan1',
					iconBg: '#FF9F43',
					color: '#FFF2E8',
				},
				{
					url: '/pages/member/bill',
					name: '买单记录',
					iconName: 'icon_notice',
					iconBg: '#48DBFB',
					color: '#E5F8FF',
				},
				{
					url: '/pages/goods/manage',
					name: '商品管理',
					iconName: 'iconbtn_upload',
					iconBg: '#10AC84',
					color: '#F6FFED',
				},
				{
					url: '/pages/distribution/products',
					name: '分销商品',
					iconName: 'iconbtn_bottom_shop',
					iconBg: '#FECA57',
					color: '#FFFBE6',
				},
				{
					url: '/pages/distribution/my-distribution',
					name: '我的分销',
					iconName: 'icon_diamond',
					iconBg: '#C44569',
					color: '#FFE6EC',
				},
				{
					url: '/pages/distribution/commission',
					name: '佣金管理',
					iconName: 'icon_balance_des',
					iconBg: '#5F27CD',
					color: '#F3E5FF',
				},
				{
					url: '/pages/member/distribution-order/index',
					name: '分销订单',
					iconName: 'icon_plus_rank',
					iconBg: '#00D2D3',
					color: '#E6FFF7',
				}
			]

		};
	},
	created() {
		// 初始化用户状态
		this.initUserState();
	},
	computed: {
		...mapGetters('user', ['isLoggedIn', 'userInfo', 'userName', 'userPhone', 'userAvatar', 'isDistributor']),
		isLogin() {
			return this.isLoggedIn;
		},
		plusBg() {
			return 'background-color:#FFB800;';
		}
	},
	methods: {
		...mapActions('user', ['initUserState', 'logout']),
		
		// 登录成功回调
		onLoginSuccess() {
			this.loginAlert = false;
			// 刷新页面数据
			this.initUserState();
			
			uni.showToast({
				title: '登录成功',
				icon: 'success'
			});
		},
		
		loginAct(e) {
			console.log(e);
			if (this.isLogin) {
				uni.navigateTo({
					url: e.currentTarget.dataset.link
				})
			} else {
				this.loginAlert = true;
			}
		},
		plugAct() {
			if (this.isBindPlus) {
				this.plusContactAlert = true;
			} else {
				this.plusBindAlert = true;
			}
		},
		storeAct() {
			this.storeBindAlert = true;
		},
		login() {
			this.loginAlert = true;
		},
		
		// 退出登录
		async logoutAction() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						this.logout();
						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						});
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
/* 用户信息区域 */
.user-header-section {
	background: #fff;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.user-info-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.user-login-card, .user-info-card {
	display: flex;
	align-items: center;
	flex: 1;
	color: #333;
}

.user-info-content {
	margin-left: 30rpx;
	flex: 1;
}

.user-name {
	font-size: 36rpx;
	font-weight: 600;
	margin-bottom: 10rpx;
}

.user-desc {
	font-size: 24rpx;
	color: #666;
}

.user-details {
	margin-left: 30rpx;
	flex: 1;
}

.user-phone {
	font-size: 28rpx;
	color: #666;
	margin-top: 8rpx;
}

.user-arrow {
	font-size: 24rpx;
	color: #999;
}

.sign-section {
	margin-left: 30rpx;
}

.sign-btn {
	background: #1890FF;
	border-radius: 20rpx;
	padding: 16rpx 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sign-text {
	font-size: 24rpx;
	color: #fff;
	font-weight: 500;
	margin-left: 8rpx;
}

/* PLUS会员区域 */
.plus-section {
	padding: 30rpx;
	background: #fff;
	margin-top: 20rpx;
	border-radius: 12rpx;
	margin: 20rpx 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
}

.plus-container {
	background: #ffb800;
	border-radius: 12rpx;
	padding: 30rpx;
}

.plus-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.plus-header {
	display: flex;
	flex-direction: column;
}

.plus-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #fff;
}

.plus-subtitle {
	font-size: 24rpx;
	color: rgba(255,255,255,0.9);
	margin-top: 8rpx;
}

.plus-action-btn {
	background: rgba(255,255,255,0.9);
	border-radius: 20rpx;
	padding: 12rpx 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-text {
	font-size: 24rpx;
	font-weight: 500;
	color: #ffb800;
	margin-right: 8rpx;
}

/* 主要内容区域 */
.main-content {
	padding: 0 30rpx;
	background: #f8f9fa;
}

.binding-cards {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
	gap: 20rpx;
}

.binding-card {
	flex: 1;
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
}

.card-icon {
	margin-right: 20rpx;
}

.card-content {
	flex: 1;
}

.card-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.card-status {
	display: flex;
	align-items: center;
}

.status-active {
	font-size: 24rpx;
	color: #52C41A;
	font-weight: 500;
}

.status-default {
	font-size: 24rpx;
	color: #1890FF;
	font-weight: 500;
}

.status-arrow {
	font-size: 20rpx;
	color: #999;
	margin-left: 8rpx;
}

/* 资产卡片区域 */
.assets-section {
	margin-bottom: 30rpx;
}

.assets-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx 0;
	display: flex;
	justify-content: space-around;
	box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
}

.asset-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.asset-value {
	font-size: 36rpx;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.balance-item .asset-value { color: #1890FF; }
.coupon-item .asset-value { color: #722ED1; }
.integral-item .asset-value { color: #FA541C; }

.asset-label {
	font-size: 24rpx;
	color: #666;
	font-weight: 500;
}

/* 订单区域 */
.order-section {
	margin-bottom: 30rpx;
}

.order-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.section-more {
	display: flex;
	align-items: center;
	color: #1890FF;
	font-size: 24rpx;
	font-weight: 500;
}

.order-types {
	display: flex;
	justify-content: space-between;
}

.order-type-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.order-icon {
	margin-bottom: 16rpx;
}

.order-name {
	font-size: 24rpx;
	color: #666;
	font-weight: 500;
}

/* 服务区域 */
.service-section {
	margin-bottom: 120rpx;
}

.service-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
}

.service-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10rpx;
}

.service-item {
	width: 25%;
	padding: 20rpx 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.service-icon {
	margin-bottom: 16rpx;
}

.service-name {
	font-size: 24rpx;
	color: #666;
	font-weight: 500;
	text-align: center;
}

/* 响应式适配 */
@media (max-width: 375px) {
	.plus-title {
		font-size: 28rpx;
	}
	
	.asset-value {
		font-size: 32rpx;
	}
	
	.service-item {
		width: 33.333%;
	}
}
</style>
